<template>
<div class="worksheet">
    <div v-if="isShare">
        <div :class="appDetail.theme?appDetail.theme:'defaultTheme'"  class="worksheetheader">
            <div class="title">
                <span style="font-size: 1.15rem" :class="[logoIconFontFamily, appDetail.icon?logoIconProfix+appDetail.icon:logoIconProfix+appDefaultIcon]"/>
                <span style="margin-left:15px">{{ title }}</span>
            </div>
        </div>
        <div class="dw">
            <div class="worksheetNav">
                <div v-for="item in fields" :key="item.name" class="th">
                    <span :title="item.alia">{{ item.alia }}</span>
                    <!-- <i class="el-icon-caret-top" title="升序" @click="asc(item.name)"></i>
                    <i class="el-icon-caret-bottom" title="降序" @click="desc(item.name)"></i> -->
                </div>
            </div>
        </div>

        <div class="worksheetdetail" v-if="loaded" v-infinite-scroll="handleInfiniteOnLoad" :infinite-scroll-delay="500" :infinite-scroll-disabled="disabled">
            <div class="detail" v-for="(item,index) in data_detail" :key="index" @click.prevent="get_detail(item)">
                <div style="white-space: nowrap;">
                    <div class="detailText" :title="isArr(item[0],0)">
                        <el-image
                            @click.stop=""
                            v-if="isImg(item[0],0)"
                            style="width: 25px; height: 25px"
                            :src="url(item[0])" 
                            :preview-src-list="srcList(item[0])">
                        </el-image>
                        <p v-else-if="isArr(item[0],0)" class="textp">{{ isArr(item[0],0) }}</p>
                        <div v-else class="text"></div>
                    </div>
                </div>
                <div class="detail_content">
                    <div v-for="item2 in (item.length-1)" :key="item2" class="detailText" :title="isArr(item[item2-1],item2-1)">
                        <el-image
                            @click.stop=""
                            v-if="isImg(item[item2-1],item2-1)"
                            style="width: 25px; height: 25px"
                            :src="url(item[item2-1])" 
                            :preview-src-list="srcList(item[item2-1])">
                        </el-image>
                        <p v-else-if="isArr(item[item2-1],item2-1)" class="textp">{{ isArr(item[item2-1],item2-1) }}</p>
                        <div v-else class="text"></div>
                    </div>
                </div>
            </div>
            <div class="tip">{{ tip }}</div>
        </div>

        <!-- 表单详情 -->
        <get-row-modal :visible="getRowModalVisible" v-if="getRowModalVisible" :worksheetId="worksheetId" :rowId="rowId" @close="closeGetRowModal"></get-row-modal>
    </div>
    <div v-else class="error">
    <div class="tip">
        表单已删除或链接已失效
    </div>
    </div>
</div>
  
</template>

<script>
import {DataType} from '../../../filterConstant'
import {getShareWorksheetDetail, getShareFilterDataList, getFilterDataList} from "@/api/worksheet"
import {getShareAppDetail} from "@/api/app"
import { profix, font_family, defaultIcon_app } from "@/util/LOGO_ICON_CONFIG"
import getRowModal from "../modal/getRowModal.vue"
import _ from 'lodash'

export default {
    name: "worksheetshare",
    components: {
        getRowModal,
    },
    
    data() {
        return {
            DataType,
            fields: [],
            title: '',
            data_detail: [],
            res_arr: [],
            current: 1,
            totalCount: 0,
            pageSize: 10,
            tip: '加载中......',
            disabled: false,
            dialogFormVisible: false,
            // get_detail_arr: [],
            appDetail: {},
            appDefaultIcon: defaultIcon_app,
            logoIconFontFamily: font_family,
            logoIconProfix: profix,
            getRowModalVisible: false,
            rowId: null,
            isShare: true,
            loaded: false
        }
    },

    methods: {
        async handleInfiniteOnLoad() {
            this.current++
            if(this.data_detail.length >= this.totalCount){
                this.tip = '没有更多了'
                this.disabled = true
                return
            }
            let data_Detail = {}
            if(this.viewId!=''){
                data_Detail = await getShareFilterDataList({
                    worksheetId: this.worksheetId,
                    WorksheetViewId: this.viewId,
                    pageNo: this.current,
                    pageSize: this.pageSize
                })
            }else{
                data_Detail = await getShareFilterDataList({
                    worksheetId: this.worksheetId,
                    pageNo: this.current,
                    pageSize: this.pageSize
                })
            }
            // const data_Detail = await getShareFilterDataList({
            //     worksheetId: this.worksheetId,
            //     pageNo: this.current,
            //     pageSize: this.pageSize
            // })
            for(const item of data_Detail.data){
                const flag = []
                for(const item2 of this.res_arr){
                    flag.push(item[item2])
                }
                this.data_detail.push(flag)
            }
        },

        get_detail(item) {
            this.getRowModalVisible = true
            this.dialogFormVisible = true
            this.rowId = item[item.length-1]
            // this.get_detail_arr = item
        },

        asc(item) {
            // 防抖
            this.asc = _.debounce(async function() {
                const data_Detail = await getShareFilterDataList({
                    worksheetId: this.worksheetId,
                    sortField: item,
                    isAsc: true
                })
                
                this.data_detail = []

                for(const items in data_Detail.data){
                    let flag = []
                    for(const index in this.res_arr){
                        flag.push(data_Detail.data[items][this.res_arr[index]])
                    }
                    this.data_detail.push(flag)
                }
            },500)
        },

        desc(item) {
            // 防抖
            this.desc = _.debounce(async function () {
                const data_Detail = await getShareFilterDataList({
                    worksheetId: this.worksheetId,
                    sortField: item,
                    isAsc: false
                })
                
                this.data_detail = []

                for(const items in data_Detail.data){
                    let flag = []
                    for(const index in this.res_arr){
                        flag.push(data_Detail.data[items][this.res_arr[index]])
                    }
                    this.data_detail.push(flag)
                }
            },500)
        },

        closeGetRowModal(){
            this.getRowModalVisible = false
        },
    },

    async mounted() {
        let data_detail = await getShareWorksheetDetail(this.worksheetId)
        if(data_detail.shareState == 0){
            this.isShare = false
        }else{
            this.isShare = true
            // 颜色和图标
            this.appDetail = await getShareAppDetail(this.appId)

            let data = await getShareWorksheetDetail(this.worksheetId)
            // this.fields = data?.fields.filter(f => (f.dataType === DataType.TEXT || f.dataType === DataType.TEXT_AREA)) || []
            if(document.body.clientWidth < 600){
                this.fields = data.fields.splice(0,3)
            }else {
                this.fields = data.fields.splice(0,6)
            }
            this.title = data.name
            for(const i of this.fields){
                this.res_arr.push(i.name)
            }
            this.res_arr.push("rowId")
            let data_Detail = {}
            if(this.viewId){
                data_Detail = await getShareFilterDataList({
                    worksheetId: this.worksheetId,
                    WorksheetViewId: this.viewId,
                    pageNo: this.current,
                    pageSize: this.pageSize
                })
            }else{
                data_Detail = await getShareFilterDataList({
                    worksheetId: this.worksheetId,
                    pageNo: this.current,
                    pageSize: this.pageSize
                })
            }
            this.totalCount = data_Detail.totalCount
            this.loaded = true

            for(const item of data_Detail.data){
                let flag = []
                for(const item2 of this.res_arr){
                    flag.push(item[item2])
                }
                this.data_detail.push(flag)
            }
        }
    },

    computed: {
        worksheetId() {
            return this.$route.params.worksheetId;
        },

        appId() {
            return this.$route.params.appId;
        },
        viewId() {
            return this.$route.params.viewId;
        },

        isImg() {
            return (item, index) => {
                if(this.fields[index].dataType == DataType.UPLOAD_IMG){
                    if(Array.isArray(item)){
                        if(item[0]){
                            return true
                        }else{
                            return false
                        }
                    }else{
                        return false
                    }
                }
                if(this.fields[index].dataType == DataType.SIGNATURE){
                    if(item){
                        return true
                    }else{
                        return false
                    }
                }
                return false
            }
        },

        url() {
            return (item) => {
                if(Array.isArray(item)){
                    return item[0].url
                }else{
                    return item
                }
            }
        },

        srcList() {
            return (item) => {
                if(Array.isArray(item)){
                    let src = []
                    for(const i in item){
                        src.push(item[i].url)
                    }
                    return src
                }
                return [item]
            }
        },

        isArr() {
            return (item, index) => {
                if(Array.isArray(item)){
                    if(this.fields[index].dataType == DataType.UPLOAD_FILE){
                        return item[0]?item[0].name:false
                    }
                    if(this.fields[index].dataType == DataType.DATE_SPAN || this.fields[index].dataType == DataType.TiME_RANGE){
                        return item[0]?item[0]+'-'+item[1]:false
                    }
                    return false
                }else if(Object.prototype.toString.call(item) === '[object Object]'){
                    return item.label || item.address
                }else{
                    if(item == "<nil>"){
                        return false
                    }else{
                        return item
                    }
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import "../../../assets/style/application.less";
    .worksheet{
        .theme1{
            background-color: rgba(255, 185, 0,1);
        }
        .theme2{
            background-color: rgba(255, 140, 0,1);
        }
        .theme3{
            background-color: rgba(247, 99, 12,1);
        }
        .theme4{
            background-color: rgba(202, 80, 16,1);
        }
        .theme5{
            background-color: rgba(218, 59, 1,1);
        }
        .theme6{
            background-color: rgba(239, 105, 80,1);
        }
        .theme7{
            background-color: rgba(209, 52, 56,1);
        }
        .theme8{
            background-color: rgba(255, 67, 67,1);
        }

        .theme9{
            background-color: rgba(231, 72, 86, 1) ;
        }
        .theme10{
            background-color: rgba(232, 17, 35, 1);
        }
        .theme11{
            background-color: rgba(234, 0, 94, 1);
        }
        .theme12{
            background-color: rgba(195, 0, 82, 1);
        }
        .theme13{
            background-color: rgba(227, 0, 140, 1);
        }
        .theme14{
            background-color: rgba(191, 0, 119, 1);
        }
        .theme15{
            background-color: rgba(194, 57, 179, 1);
        }
        .theme16{
            background-color: rgba(154, 0, 137, 1);
        }
        .theme17{
            background-color: rgba(0, 120, 215, 1);
        }
        .theme18{
            background-color: rgba(0, 99, 177, 1);
        }
        .theme19{
            background-color: rgba(142, 140, 216, 1);
        }
        .theme20{
            background-color: rgba(107, 105, 214, 1);
        }
        .theme21{
            background-color: rgba(135, 100, 184, 1);
        }
        .theme22{
            background-color: rgba(116, 77, 169, 1);
        }
        .theme23{
            background-color: rgba(177, 70, 194, 1);
        }
        .theme24{
            background-color: rgba(136, 23, 152, 1);
        }

        .defaultTheme{
            background-color: rgba(0, 153, 188, 1);
        }
        .theme26{
            background-color: rgba(45, 125, 154, 1);
        }
        .theme27{
            background-color: rgba(0, 183, 195, 1);
        }
        .theme28{
            background-color: rgba(3, 131, 135, 1);
        }
        .theme29{
            background-color: rgba(0, 178, 148, 1);
        }
        .theme30{
            background-color: rgba(1, 133, 116, 1);
        }
        .theme31{
            background-color: rgba(0, 204, 106, 1);
        }
        .theme32{
            background-color: rgba(16, 137, 62, 1);
        }

        .theme33{
            background-color: rgba(122, 117, 116, 1);
        }
        .theme34{
            background-color: rgba(93, 90, 88, 1);
        }
        .theme35{
            background-color: rgba(104, 118, 138, 1);
        }
        .theme36{
            background-color: rgba(81, 92, 107, 1);
        }
        .theme37{
            background-color: rgba(86, 124, 115, 1);
        }
        .theme38{
            background-color: rgba(72, 104, 96, 1);
        }
        .theme39{
            background-color: rgba(73, 130, 5, 1);
        }
        .theme40{
            background-color: rgba(16, 124, 16, 1);
        }

        .theme41{
            background-color: rgba(118, 118, 118, 1);
        }
        .theme42{
            background-color: rgba(76, 74, 72, 1);
        }
        .theme43{
            background-color: rgba(105, 121, 126, 1);
        }
        .theme44{
            background-color: rgba(74, 84, 89, 1);
        }
        .theme45{
            background-color: rgba(100, 124, 100, 1);
        }
        .theme46{
            background-color: rgba(82, 94, 84, 1);
        }
        .theme47{
            background-color: rgba(132, 117, 69, 1);
        }
        .theme48{
            background-color: rgba(126, 115, 95, 1);
        }

        overflow: scroll;
        height: 100%;
        background-color: #f5f5f9;

        .worksheetheader{
            width: 100%;
            position: fixed;
            height: 60px;
            top: 0;
            // background-color: skyblue;
            border-bottom: 1px solid rgb(0 0 0 / 16%);
            box-shadow: 0 0 3px gray inset;
            z-index: 2;

            .title{
                width: 60%;
                height: 100%;
                margin: auto;

                .img_logo{
                    width: 40px;
                    height: 40px;
                    margin-top:10px
                }

                span{
                    position: relative;
                    top: 20%;
                    left: 45%;
                    font-size: 20px;
                    color: white;
                }
            }
        }

        .dw{
            position: fixed;
            top: 60px;
            height: 40px;
            width: 60%;
            margin-left: 19.5%;
            padding-top: 10px;
            background-color: #f5f5f9;
            z-index: 1;

            .worksheetNav{
                display: flex;
                justify-content: flex-start;
                height: 30px;

                .th{
                    flex: 1;
                    height: 30px;
                    width: 140px;
                    padding-left: 30px;
                    color: gray;
                    font-size: 15px;
                    white-space: nowrap;
                    text-align: center;
                    overflow:hidden;
                    text-overflow: ellipsis;
                    cursor:pointer;

                    .el-icon-caret-bottom:hover{
                        color: red;
                    }

                    .el-icon-caret-top:hover{
                        color: red;
                    }

                    .el-icon-caret-top{
                        position: relative;
                        bottom: 4px;
                    }

                    .el-icon-caret-bottom{
                        position: relative;
                        top: 4px;
                        right: 14.8px;
                    }
                }
            }
        }
        
        .worksheetdetail{
            position: relative;
            top: 90px;
            margin-bottom: 20px;

            .detail{
                width: 60%;
                height: 70px;
                margin: auto;
                margin-top: 20px;
                background-color: #FFFFFF;
                color: black;
                overflow: hidden;
                box-shadow: 0 1px 4px rgb(0 0 0 / 16%);
                cursor:pointer;
                padding: 15px;

                .detail_content{
                    display: flex;
                    justify-content: flex-start;
                    padding-top: 5px;
                    .detailText{
                        display: inline;
                        padding-left: 30px;
                        padding-right: 10px;
                        flex: 1;
                        white-space: nowrap;
                        text-align: center;
                        overflow:hidden;
                        text-overflow: ellipsis;
                        font-size: 13px;

                        .textp{
                            white-space: nowrap;
                            overflow:hidden;
                            text-overflow: ellipsis;
                        }

                        .text{
                            width: 15px;
                            height: 3px;
                            border-radius: 10px;
                            background-color: #EDEDED;
                            white-space: nowrap;
                            overflow:hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }

            .detail:hover{
                background-color: #f3f3f393;
            }

            .tip{
                height: 30px;
                color: gray;
                margin-top: 15px;
                text-align: center;
            }
        }

        .text2{
            border-radius: 10px;
            width: 20px;
            height: 6px;
            background-color: #EAEAEA;
        }

        .error{
            width: 100%;
            height: 100%;
            background-color: #f5f5f9;

            .tip{
                margin: auto;
                padding-top: 100px;
                width: 1200px;
                height: 700px;
                font-size: 20px;
                text-align: center;
                color: gray;
                background-color: #FFFFFF;
            }
        }

        @media screen and (max-width: 600px) {
            .worksheetheader{
                width: 100%;
                position: fixed;
                height: 50px;
                // background-color: skyblue;
                top: 0;
                border-bottom: 1px solid rgb(0 0 0 / 16%);
                box-shadow: 0 0 3px gray inset;
                z-index: 2;

                .title{
                    width: 90%;
                    height: 100%;
                    margin: auto;

                    .img_logo{
                        width: 35px;
                        height: 35px;
                        margin-top:8px
                    }

                    span{
                        position: relative;
                        top: 20%;
                        font-size: 20px;
                    }
                }
            }

            .dw{
                position: fixed;
                top: 50px;
                height: 40px;
                width: 95%;
                margin-left: 0;
                padding-top: 10px;
                background-color: #f5f5f9;
                z-index: 2;

                .worksheetNav{
                    display: flex;
                    justify-content: space-between;
                    height: 30px;

                    .th{
                        height: 30px;
                        width: 140px;
                        padding-left: 20px;
                        text-align: center;
                        color: gray;
                        font-size: 15px;
                        white-space: nowrap;
                        overflow:hidden;
                        text-overflow: ellipsis;
                    }
                }
            }

            .worksheetdetail{
                position: relative;
                top: 70px;
                margin-bottom: 20px;

                .detail{
                    width: 95%;
                    height: 70px;
                    margin: auto;
                    margin-top: 15px;
                    background-color: #FFFFFF;
                    color: black;
                    overflow: hidden;
                    box-shadow: 0 1px 4px rgb(0 0 0 / 16%);

                    padding: 15px;
                    .detail_content{
                        display: flex;
                        justify-content: space-between;
                        padding-top: 5px;

                        .detailText{
                            display: inline;
                            padding-left: 10px;
                            text-align: center;
                            width: 100px;
                            font-size: 13px;
                        }
                    }
                }
            }

            .error{
                width: 100%;
                height: 100%;
                background-color: #f5f5f9;

                .tip{
                    margin: auto;
                    padding-top: 100px;
                    width: 300px;
                    height: 700px;
                    font-size: 20px;
                    text-align: center;
                    color: gray;
                    background-color: #FFFFFF;
                }
            }
        }
    }
</style>